<template>
  <a-modal
    title="灌装单明细信息列表"
    :visible="show"
    @ok="handleOk"
    @cancel="handleCancel"
    width="70%"
    class="procedure-modal"
  >
    <template slot="footer">
      <a-button key="submit" type="primary" @click="handleOk"> 返回 </a-button>
    </template>
    <a-table
      :columns="workUnitColums"
      :row-key="(record) => record.id"
      :data-source="procedureData"
      :loading="loading"
      :scroll="{ y: 500 }"
      size="middle"
    >
      <template slot="IfBalance" slot-scope="text, record">
        <span>{{ record.IfBalance ? "是" : "否" }}</span>
      </template>
      <template slot="action" slot-scope="text, record">
        <div style="display: flex; justify-content: space-around">
          <a-button
            style="border: 1px solid #ec1a1a"
            @click="setDetail(record, false)"
          >
            <span style="color: #ec1a1a">编辑</span>
          </a-button>

          <a-button class="default-button" @click="DelPPDetailFun(record)"
            >删除</a-button
          >
        </div>
      </template>
    </a-table>
    <!--更改明细-->
    <a-modal
      title="修改明细"
      :visible="editDetailShow"
      :confirmLoading="detailSaveLoading"
      @ok="saveDetail"
      @cancel="editDetailShow = false"
      width="60%"
      class="procedure-modal"
    >
      <a-row style="margin: 0.5rem">
        <a-col :span="6"><span>配方明细序号</span></a-col>
        <a-col :span="18"
          ><a-input-number
            disabled
            :min="1"
            style="width: 100%"
            v-model="selectedDetail.PaRecipeDetailNo"
        /></a-col>
      </a-row>
      <a-row v-if="false" style="margin: 0.5rem">
        <a-col :span="6"><span>主物料</span></a-col>
        <a-col :span="18">
          <a-select
            allowClear
            style="width: 100%"
            show-search
            v-model="selectedDetail.MainMaterialCode"
            @popupScroll="mainMaterialhandlepopupScroll"
            @search="mainMaterialSearch"
            @change="mainMaterialChange"
            @inputKeydown="inputMainKeydownFun"
          >
            <a-spin
              v-if="mainMaterialFetching"
              slot="notFoundContent"
              size="small"
            />
            <a-select-option
              v-for="(item, index) in mainMaterialsList"
              :value="item.MaterialCode"
              :key="index"
            >
              <span>{{ item.MaterialCode }}[{{ item.MaterialName }}]</span>
            </a-select-option>
          </a-select>
        </a-col>
      </a-row>
      <a-row style="margin: 0.5rem">
        <a-col :span="6"><span>物料编码</span></a-col>
        <a-col :span="18"
          ><a-input
            disabled
            style="width: 100%"
            v-model="selectedDetail.MaterialCode"
        /></a-col>
      </a-row>
      <a-row style="margin: 0.5rem">
        <a-col :span="6"><span>物料名称</span></a-col>
        <a-col :span="18"
          ><a-input
            disabled
            style="width: 100%"
            v-model="selectedDetail.MaterialName"
        /></a-col>
      </a-row>
      <a-row style="margin: 0.5rem">
        <a-col :span="6"><span>需求数量</span></a-col>
        <a-col :span="18"
          ><a-input-number
            :min="0"
            style="width: 100%"
            v-model="selectedDetail.ReqQty"
        /></a-col>
      </a-row>
      <a-row style="margin: 0.5rem">
        <a-col :span="6"><span>计量单位</span></a-col>
        <a-col :span="18"
          ><a-input style="width: 100%" v-model="selectedDetail.ComUnitName"
        /></a-col>
      </a-row>
      <a-row style="margin: 0.5rem">
        <a-col :span="6"><span>实际数量</span></a-col>
        <a-col :span="18"
          ><a-input-number
            disabled
            :min="0"
            style="width: 100%"
            v-model="selectedDetail.RealQty"
        /></a-col>
      </a-row>
      <a-row style="margin: 0.5rem">
        <a-col :span="6"><span>BOM比例</span></a-col>
        <a-col :span="18"
          ><a-input-number
            :min="0"
            style="width: 100%"
            v-model="selectedDetail.Ratio"
        /></a-col>
      </a-row>
      <a-row style="margin: 0.5rem">
        <a-col :span="6"><span>平衡基准</span></a-col>
        <a-col :span="18">
          <a-checkbox
            style="width: 100%"
            v-model="selectedDetail.IfBalance"
          ></a-checkbox
        ></a-col>
      </a-row>
    </a-modal>
  </a-modal>
</template>

<script>
import { DelPackingPlanDetail, SaveDetail } from "@/api/PackingPlanMange/index";
import { getMaterials } from "@/api/MaterialManagement/index";
const workUnitColums = [
  {
    title: "配方明细序号",
    dataIndex: "PaRecipeDetailNo",
    align: "center",
    sorter: true,
  },
  {
    title: "物料编码",
    dataIndex: "MaterialCode",
    align: "center",
  },
  {
    title: "物料名称",
    dataIndex: "MaterialName",
    align: "center",
    ellipsis: true,
    width: 200,
  },
  {
    title: "需求数量",
    dataIndex: "ReqQty",
    align: "center",
  },
  {
    title: "计量单位",
    dataIndex: "ComUnitName",
    align: "center",
  },
  {
    title: "实际数量",
    dataIndex: "RealQty",
    align: "center",
  },
  {
    title: "BOM比例",
    dataIndex: "Ratio",
    align: "center",
  },
  {
    title: "平衡基准",
    dataIndex: "IfBalance",
    align: "center",
    scopedSlots: { customRender: "IfBalance" }, //开启插槽
  },
  {
    title: "操作",
    dataIndex: "operate",
    width: 200,
    align: "center",
    fixed: "right",
    scopedSlots: { customRender: "action" },
  },
  // {
  //   title: '损耗数量',
  //   dataIndex: 'LossQty',
  //   align: 'center',
  // },
  // {
  //   title: '配方使用量',
  //   dataIndex: 'Quantity',
  //   align: 'center',
  // },
  // {
  //   title: '生产配方初始物料数量',
  //   dataIndex: 'OriginalMaterialQty',
  //   align: 'center',
  // },
  // {
  //   title: '是否补料',
  //   dataIndex: 'IfAddition',
  //   align: 'center',
  // },
  // {
  //   title: '备料状态',
  //   dataIndex: 'PreStatus',
  //   align: 'center',
  // },
];
export default {
  props: ["show", "procedureData"],
  data() {
    return {
      workUnitColums,
      loading: false,
      confirmLoading: false,
      editDetailShow: false, //显示明细修改
      detailSaveLoading: false, //保存明细修改
      selectedDetail: {}, //选择的明细
      mainMaterialsSearch: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 30,
        },
        keyValue: "",
        ifLeafNode: true,
      }, //分页
      mainMaterialsNum: 0, //总条数
      mainMaterialsList: [],
      mainMaterialFetching: false,
      currentMainMaterialsInfo: {}, //当前选中的产品
    };
  },
  methods: {
    //关闭弹窗
    handleCancel() {
      this.$emit("update:show", false);
    },
    //确认添加/修改
    handleOk() {
      this.$emit("update:show", false);
    },
    //表格选择
    handleTableChange() {},
    //删除
    async DelPPDetailFun(row) {
      let that = this;
      const data = {
        PackingPlanDetailID: row.PackingPlanDetailID,
      };
      that.loading = true;
      let res = await DelPackingPlanDetail(data);
      if (res.Status == 10000) {
        that.$message.success("删除成功");
        let num = that.procedureData.indexOf(row);
        that.procedureData.splice(num, 1);
        that.procedureData.map((row, index) => {
          if (row.PaRecipeDetailNo > num) {
            row.PaRecipeDetailNo = ++index;
          }
        });
      } else {
        that.$message.error(res.Message);
      }
      that.loading = false;
    },
    //编辑明细弹窗
    setDetail(row) {
      this.editDetailShow = true;
      this.selectedDetail = row;
      if (row.MainMaterialCode) {
        this.mainMaterialsSearch.keyValue = row.MainMaterialCode;
        this.getmainMaterialsFun();
      }
    },
    //编辑明细
    async saveDetail() {
      let that = this;

      that.detailSaveLoading = true;
      let res = await SaveDetail(this.selectedDetail);
      if (res.Status == 10000) {
        that.$message.success(`保存成功`);
        let num = that.procedureData.indexOf(this.selectedDetail);
        that.procedureData.splice(num, 1, this.selectedDetail);
        //只能设置一个基准
        if (this.selectedDetail.IfBalance) {
          that.procedureData.map((row1, index) => {
            if (index != num) {
              row1.IfBalance = false;
            }
          });
        }
        this.editDetailShow = false;
      } else {
        that.$message.error(res.Message);
      }
      that.detailSaveLoading = false;
    },
    //键盘
    inputMainKeydownFun(e) {
      if (e.code == "Enter") {
        let that = this;
        // that.materialsSearch.keyValue = value;
        that.mainMaterialsSearch.pageRequestModel.pageIndex = 1;
        that.mainMaterialFetching = true;
        that.mainMaterialsList = [];
        that.getmainMaterialsFun();
      }
    },
    //查询产品
    async getmainMaterialsFun() {
      let that = this;
      const res = await getMaterials(that.mainMaterialsSearch);

      that.mainMaterialFetching = false;
      that.mainMaterialsList = that.mainMaterialsList.concat(res.Data.Data);
      that.mainMaterialsNum = res.Data.TotalNumber;
    },
    mainMaterialhandlepopupScroll(e) {
      let that = this;
      const { scrollHeight, scrollTop, clientHeight } = e.target;

      if (scrollHeight - scrollTop === clientHeight) {
        that.mainMaterialsSearch.pageRequestModel.pageIndex += 1;
        if (this.mainMaterialsList.length < that.mainMaterialsNum) {
          that.getmainMaterialsFun();
        }
      }
    },
    mainMaterialSearch(value) {
      let that = this;
      that.mainMaterialsSearch.keyValue = value;
    },
    mainMaterialChange(value) {
      let that = this;
      that.currentMainMaterialsInfo = that.mainMaterialsList.find(
        (item) => item.MaterialCode == value
      );
      if (that.currentMainMaterialsInfo.MaterialName) {
        that.selectedDetail.MainMaterialName =
          that.currentMainMaterialsInfo.MaterialName;
        that.selectedDetail.MainMaterialCode =
          that.currentMainMaterialsInfo.MaterialCode;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.procedure-modal {
  .title {
    border-bottom: 1px solid #eeeeee;
    padding: 0.625rem 0;
    margin-bottom: 0.625rem;
  }
  .production-reporting {
    border-bottom: 1px solid #eeeeee;
    padding: 0.625rem 0;
    margin-bottom: 0.625rem;
    .name {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
  .table-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .left {
      flex: 1;
    }
    .right {
      flex: 1;
    }
    .center {
      display: flex;
      flex-direction: column;
      margin: 0 1.25rem;
    }
    .search {
      margin: 0.625rem 0;
    }
    .name {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
}
/deep/.ant-table-body {
  &::-webkit-scrollbar {
    margin: 0.2rem;
    //整体样式
    height: 0.4125rem;
    width: 0.3rem;
  }

  &::-webkit-scrollbar-thumb {
    //滑动滑块条样式
    border-radius: 0.625rem;
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
    background: #009a9a;
    // background: rgba(2, 35, 60, 1);
  }

  &::-webkit-scrollbar-track {
    //轨道的样式
    -webkit-box-shadow: 0;
    border-radius: 0.625rem;
    background: #ccc;
  }

  &::-webkit-scrollbar-corner {
    background: red;
  }
}
</style>
